<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>身份匹配</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <script src='../../../CommonTool/commonNetWork.js'></script>
    <script src="../../../script/jquery.js"></script>
    <script src="../../../CommonTool/progress.js"></script>
    <script src="./BasicExpression.js"></script>
</head>
<style>
    .ImageInfoBodyther {
        height: 17vw;
        margin: 0 auto;
        border: solid 2px rgb(245, 243, 164);
    }

    .ImageInfoBody {
        height: 20vw;
        margin: 0 auto;
        display: block;
        border: solid 2px rgb(245, 243, 164);
    }

    @media (min-width: 1240px) and (orientation: landscape) {
        .row-margin {
            margin-top: 3%;
        }
    }
</style>

<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-pull-left aui-btn" onclick="close_win();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">基础-初级-表情识别-表情配对</div>
    </header>
    <section class="aui-grid">
        <div class="aui-row row-margin">
            <div class="aui-col-xs-3"></div>
            <div class="aui-col-xs-6" class="container">
                <img src="http://172.16.32.194/social/basic/2-表情识别/1/参考.png" alt="" class="ImageInfoBodyther"
                    data-name="other" onclick="clickDisappear(this)">
                <!-- <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage1" class="float-image"> -->
            </div>
        </div>
        <div class="aui-row">
            <div class="aui-col-xs-1" style="padding: 2px"></div>
            <div class="aui-col-xs-10" style="border-bottom: 2px solid; padding: 1px"></div>
        </div>
        <div class="aui-row row-margin">
            <div class="aui-col-xs-3">
                <img src="http://172.16.32.194/social/basic/2-表情识别/1/1.png" alt="" class="ImageInfoBody"
                    data-name="error1" onclick="ClickSelect4(this)" id="ImageError1" />
            </div>
            <div class="aui-col-xs-3">
                <img src="http://172.16.32.194/social/basic/2-表情识别/1/2.png" alt="" class="ImageInfoBody"
                    data-name="right" onclick="ClickSelect4(this)" id="ImageRight" />
                <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage1"
                    class="float-image" />
            </div>
            <div class="aui-col-xs-3">
                <img src="http://172.16.32.194/social/basic/2-表情识别/1/3.png" alt="" class="ImageInfoBody"
                    data-name="error2" onclick="ClickSelect4(this)" id="ImageError2" />
            </div>
            <div class="aui-col-xs-3" class="container">
                <img src="http://172.16.32.194/social/basic/2-表情识别/1/4.png" alt="" class="ImageInfoBody"
                    data-name="error3" onclick="ClickSelect4(this)" id="ImageError3" />
            </div>
            <div class="footbar">
                <p class="barLeft" onclick="toggleMenu()">第一关</p>
                <div class="barCenter">
                    <div id="InitialButton" style="float:left;margin-left: 4%" onclick="InitialClick()">
                        <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="" />
                    </div>
                    <div
                        id="InitialButton1"
                        style="float: left; margin-left: 4%; display: none"
                        onclick="ShowInitialClick()"
                    >
                        <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="" />
                    </div>
                    <div id="InitialButton2" style="float: left; margin-left: 3%; display: none">
                        <audio
                            src="http://172.16.32.194/promptsound/找一样的.mp3"
                            id="audioBody"
                            controls
                            autoplay
                        ></audio>
                        <img
                            style="width: 2rem; height: 1.6rem; margin-top: 12%"
                            src="http://172.16.32.194/commonButton/播放2.png"
                            alt=""
                            onclick="ImgAudioClick()"
                        />
                    </div>
                    <div id="InitialButton3" style="float: left; margin-left: 4%; display: none">
                        <img
                            id="passImg"
                            src="http://172.16.32.194/commonButton/提示.png"
                            alt=""
                            onclick="TipsClick()"
                        />
                    </div>
                    <div id="InitialButton4" style="float: left; margin-left: 4%; display: none">
                        <img
                            style="width: 2rem; height: 2rem; margin-top: 6%"
                            src="http://172.16.32.194/commonButton/刷新1.png"
                            alt=""
                            onclick="ResetClick2()"
                        />
                    </div>
                </div>
                <p class="barright">
                    <img
                        src="http://172.16.32.194/commonButton/next1.png"
                        alt=""
                        class="BarBottom"
                        onclick="go_forward();"
                    />
                </p>
                <!-- <p class="barright">
                    <img
                        style="width: 3.5rem; height: 1.5rem; margin-top: 6%"
                        src="http://172.16.32.194/commonButton/pass1.png"
                        onclick="passclick();"
                    />
                </p> -->
            </div>
        </section>
        <!-- 全部答对   -->
        <div class="backdrop_bg" id="backdrop_bgright" onclick="hideRightPopup()">
            <audio src="http://172.16.32.194/tipvideo/right1.mp3" id="audioBodyRight"></audio>
            <div class="backdrop_contentGif">
                <div id="backdrop_text"></div>
            </div>
        </div>
        <!-- 答错不得分 -->
        <div class="backdrop_bg" id="backdropMistake" onclick="hideMistake()">
            <audio src="http://172.16.32.194/tipvideo/error3.mp3" id="audioBodyMistake"></audio>
            <div class="backdrop_contentMistakeGif">
                <div id="backdrop_text"></div>
            </div>
        </div>
        <!-- 通过 -->
        <div class="backdrop_bg" id="backdropPass">
            <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
            <div class="backdrop_contentPasseGif"></div>
        </div>
        <div class="menu" id="menu">
        <div class="menu-item" onclick="goto_page(1)">第一关</div>
        <div class="menu-item" onclick="goto_page(2)">第二关</div>
        <div class="menu-item" onclick="goto_page(3)">第三关</div>
        <div class="menu-item" onclick="goto_page(4)">第四关</div>
        <div class="menu-item" onclick="goto_page(5)">第五关</div>
        <div class="menu-item" onclick="goto_page(6)">第六关</div>
        <div class="menu-item" onclick="goto_page(7)">第七关</div>
        <div class="menu-item" onclick="goto_page(8)">第八关</div>
        <div class="menu-item" onclick="goto_page(9)">第九关</div>
        <div class="menu-item" onclick="goto_page(10)">第十关</div>
        <div class="menu-item" onclick="goto_page(11)">第十一关</div>
        <div class="menu-item" onclick="goto_page(12)">第十二关</div>
        <div class="menu-item" onclick="goto_page(13)">第十三关</div>
        <div class="menu-item" onclick="goto_page(14)">第十四关</div>
        <div class="menu-item" onclick="goto_page(15)">第十五关</div>
        <div class="menu-item" onclick="goto_page(16)">第十六关</div>
        <div class="menu-item" onclick="goto_page(17)">第十七关</div>
        <div class="menu-item" onclick="goto_page(18)">第十八关</div>
        <div class="menu-item" onclick="goto_page(19)">第十九关</div>
        <div class="menu-item" onclick="goto_page(20)">第二十关</div>
    </div>
</body>
<script>
    var token = "";
    var userid = "";
    var currentTimestamp = "";
    var operationName = "";
    var additionalInfo = "";
    var groupId = "";
    var scene = "基础";
    var sceneLevel = "初级";
    var courseType = "表情识别";
    var classSort = "1";
    var moodType="伤心";
    var remarks = "表情配对";
    var classType = "学习";
    apiready = function () {
            document.getElementById("audioBody").style.display = "none";
            document.getElementById("floatingImage1").style.display = "none";
            token = api.pageParam.token;
            userid = api.pageParam.uid;
            currentTimestamp = Date.now();
            operationName = "ing";
            additionalInfo = "";

            if (api.pageParam.groupId !== undefined) {
                groupId = api.pageParam.groupId;
            } else {
                InitializeCommonNetWork();
            }
        };
    function passclick() {
        // document.getElementById('backdropPass').style.display='block'
        // document.getElementById('audioBodyPass').play()
        document.querySelectorAll("audio").forEach((audio) => audio.pause())
        setTimeout(() => {
            api.openWin({
                name: 'ExpressionMatching2',
                url: './ExpressionMatching2.html',
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId
                },
                reload: true,
            })
        },2)
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo =""
        CommonNetWork()
    }
    function go_forward() {
        document.querySelectorAll("audio").forEach((audio) => audio.pause())
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
            name: 'ExpressionMatching2',
            url: './ExpressionMatching2.html',
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId
            },
            reload: true,
        })
    }
    function ResetClick2() {
        api.openWin({
            name: "ExpressionMatching1",
            url: "./ExpressionMatching1.html",
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
            animation: {
                type: "none", // 禁用动画类型
                duration: 0, // 动画时长设为0
            },
        });
    }
    function goto_page(number) {
        const pages = [
            "ExpressionMatching1",
            "ExpressionMatching2",
            "ExpressionMatching3",
            "ExpressionMatching4",
            "ExpressionMatching5",
            "ExpressionMatching6",
            "ExpressionMatching7",
            "ExpressionMatching8",
            "ExpressionMatching9",
            "ExpressionMatching10",
            "ExpressionMatching11",
            "ExpressionMatching12",
            "ExpressionMatching13",
            "ExpressionMatching14",
            "ExpressionMatching15",
            "ExpressionMatching16",
            "ExpressionMatching17",
            "ExpressionMatching18",
            "ExpressionMatching19",
            "ExpressionMatching20",
        ];

        var name = pages[number - 1]
        var url = "./" + name + ".html"


        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>

</html>